<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content">本地订单</text></block>
		</cu-custom>
		
		<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615357083_VQ5anlu7.jpg);background-size: 100% 100%;"> -->
		<view class="whole-box" >
			<view class="gold-black-box">
				<view class="my-data-box" v-for="(item,index) in list" :key="index" >
					<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<!-- <view class="my-data-box-content">
						<view class="stander-line"><text class="title">（{{item.receiver_region_name}}）拼中订单 ： {{item.product&&item.product[0]&&item.product[0].product_name?item.product[0].product_name:''}}</text></view>
						<view class="stander-line"><text class="time">{{$common.timeFormat(item.pay_time)}}</text></view>
						<view class="stander-line"><text class="order_sn">订单编号：{{item.order_sn}}</text></view>
						<view class="stander-line"><text class="price">拼中金额 ：{{item.order_money}}</text><text class="num">+{{item.crelog&&item.crelog.num?parseInt(item.crelog.num):'0'}}</text></view>
					</view> -->
					<view class="my-data-box-content">
						<view class="stander-line"><text class="title">（{{item.order?item.order.receiver_region_name:''}}）拼中订单 ： {{item.order&&item.order.product&&item.order.product[0]&&item.order.product[0].product_name?item.order.product[0].product_name:''}}</text></view>
						<view class="stander-line"><text class="time">{{$common.timeFormat(item.created_at)}}</text></view>
						<view class="stander-line"><text class="order_sn">订单编号：{{item.order?item.order.order_sn:''}}</text></view>
						<view class="stander-line"><text class="price">拼中金额 ：{{item.order?item.order.order_money:'0.00'}}</text><text class="num">+{{parseFloat(item.num).toFixed(2)}}</text></view>
					</view>
					
					
				</view>
				
				<view class="cu-load margin-center text-white" :class="loading?'loading':'over'"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: this.$config.THEME(),
				list: [],
				hasMore: true,
				loading: false,
				page: 1,
				member: null,
			}
		},
		onLoad() {
			this.$common.getMember().then((member) => {
				this.$nextTick((r) => {
					uni.startPullDownRefresh({})
				})
			})
			
		},
		methods: {
			
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					this.$http
						.get('channel_region_orders', {
							page: this.page
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							this.list = list
							this.page += 1
			
							this.loading = false
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							this.loading = false
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
				}
			}
			
		},
		onReachBottom() {
			this.getList()
		},
		onPullDownRefresh() {
			this.list = []
			this.hasMore = true
			this.page = 1
			this.loading = false
			this.getList()
		},
	}
</script>


<style>
	.whole-box{
		background-image: url(../../../static/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px);
		padding: 12px 0 12px;
		width: 100%;
	}
	.gold-black-box{
		/* padding: 12px 0 12px; */
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 250rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	/* .gold-black-box .my-data-box:first-child{
		margin-top: 0;
	} */
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 250rpx;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #ffffff;
	}
	
	.my-data-box-content .stander-line{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.stander-line .title{
		font-size: 30rpx;
		font-weight: bold;
		color: #1A181E;
	}
	.stander-line .time{
		font-size: 22rpx;
		color: #1A181E;
	}
	.stander-line .order_sn{
		font-size: 26rpx;
		color: #1A181E;
	}
	.stander-line .price{
		font-size: 26rpx;
		color: #1A181E;
	}
	.stander-line .num{
		font-size: 36rpx;
		color: #1A181E;
	}
</style>